<template>
	<div class="projectDetailContent">
		<div class="control">
			<div class="title">{{currentData.name || ''}}</div>
			<a-button type="primary" @click="handleClick">编辑</a-button>
		</div>
		<div class="content">
			<div class="item">
				<div class="label">项目简介</div>
				<div class="value"><div v-html="currentData.describe || '暂无' "></div></div>
			</div>
			<div class="item">
				<div class="label">项目进度</div>
				<div class="value" style="text-align: center;" v-if="currentData.totalMemberLimit">
					{{ currentData?.studentList?.length >= currentData.totalMemberLimit ? '已招满' : '招募中'}}
				</div>
			</div>
			<div class="item" >
				<div class="label">
					项目成员
				</div>
				<div class="teacherBox">
					<div class="teacherItem">
						<img src="@/assets/user.png" alt="头像">
						<div style="font-size: 14px;">
							<div>最多招募{{currentData.totalMemberLimit}}人</div>
							<div style="margin-top: 8px;">待招<span style="color: #ff6d6d;">{{currentData?.totalMemberLimit - currentData?.studentList?.length || 0}}</span>人</div>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="label">项目目标</div>
				<div class="value"><div v-html="currentData.target||'暂无' "></div></div>
			</div>
			<div class="item">
				<div class="label">推荐学习周</div>
				<div class="value">{{currentData.learningCycle || ''}}周</div>
			</div>
			<div class="item" style="flex-direction: row;">
				<div class="label">
					项目基本信息
				</div>
				<div class="sonBox">
					<div class="sonItem">
						<div class="sonLabel">年级</div>
						<div class="sonValue">{{currentData.grade}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">班级</div>
						<div class="sonValue">{{formatClass(currentData.gradeClassList)}}</div>
					</div>
					<div class="sonItem">
						<div class="sonLabel">成员总数</div>
						<div class="sonValue">{{currentData.totalMemberLimit}}</div>
					</div>
					
				</div>
			</div>


			<div class="item" >
				<div class="label">
					评分标准
				</div>
				<div class="value">
					<div v-html="currentData.scoreStandard||'暂无' "></div>
				</div>
			</div>
			<div class="item" >
				<div class="label">
					主指导老师
				</div>
				<div class="teacherBox">
					<div class="teacherItem">
						<img src="@/assets/user.png" alt="头像">
						<div>
							<div>{{currentData?.mainTeacher?.teacherName}}</div>
							<!-- <div style="margin-top: 10px;">教师技能</div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="item" >
				<div class="label">
					副指导老师
				</div>
				<div class="teacherBox">
					<div class="teacherItem" v-for="item in currentData?.coTeacherList" :key="item.id">
						<img src="@/assets/user.png" alt="头像">
						<div>
							<div>{{item.teacherName}}</div>
							<!-- <div style="margin-top: 10px;">教师技能</div> -->
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits,onMounted } from 'vue'

const { currentData } = defineProps({
  currentData: { type: Object, default: {} },
})
const tableColumns = [
	{ title: '岗位', dataIndex: 'name', key: 'name' },
	{ title: '人数', dataIndex: 'requiredNum', key: 'requiredNum' },
	{ title: '技能', dataIndex: 'skill', key: 'skill' },
]
const editFlag = () => {
	return new Date(currentData.startTime) < new Date()
}
const formatCourse = courseList => {
	if (!courseList) return ''
	return courseList.map(item => item.courseName).join('，')
}
const formatClass = gradeClassList => {
	if (!gradeClassList) return ''
	return gradeClassList.map(item => item.gradeClassName).join('，')
}

const emit = defineEmits()

const handleClick = () => {
	emit('handleClick', {name: '编辑', item: currentData})
}

</script>

<style lang="scss" scoped>
*{
	box-sizing: border-box;
}
.projectDetailContent {
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #d7d2e2;
	border-radius: 10px;
	padding: 20px;
	color: #333;
	
	.control {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-bottom: 10px;
		.title {
			flex: 1;
			padding:12px 20px;
			border-radius: 5px;
			background: #fff;
			text-align: center;
			font-weight: bold;
			font-size: 18px;
			margin-right: 10px;
		}
	}
	.content {
		min-height: 0;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		
		.item {
			margin-top: 15px;
			display: flex;
			flex-direction: column;
		}
		.label {
			display: flex;
			min-width: 100px;
		}
		.value {
			margin-top: 10px;
			width: 100%;
			padding:12px;
			border-radius: 5px;
			background: #fff;
		}
		.sonBox {
			display: flex;
			flex-wrap: wrap;
			margin-left: 20px;
			flex: 1;
			.sonItem {
				display: flex;
				flex-direction: column;
				font-size: 14px;
				margin-bottom: 10px;
				margin-right: 15px;
				.sonLabel {}
				.sonValue {
					margin-top: 10px;
					padding:12px;
					border-radius: 5px;
					background: #fff;
					width: 200px;
				}
			}
		}
		.teacherBox {
			margin-top: 15px;
			display: flex;
			flex-wrap: wrap;
			.teacherItem {
				margin-right: 15px;
				display: flex;
				align-items: center;
				padding: 12px;
				width: 200px;
				height: 80px;
				background: #fff;
				border-radius: 10px;
				margin-right: 15px;
				margin-bottom: 15px;
				img {
					width: 45px;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>